<template>
	<view class="bind">
		<view class="form-wrapper">
		  <u-form :model="form" ref="uForm" label-width="140rpx">
		    <u-form-item label="持卡人" prop="Cardholder">
		      <u-input v-model="form.Cardholder" placeholder="请输入持卡人" />
		    </u-form-item>
		    <u-form-item label="身份证号" prop="ID_card">
		      <u-input v-model="form.ID_card" placeholder="请输入身份证号" />
		    </u-form-item>
		    <u-form-item label="银行卡号" prop="bank_card_number">
		      <u-input v-model="form.bank_card_number" placeholder="请输入银行卡号" />
		    </u-form-item>
		    <u-form-item label="开户行" prop="bank_branch" >
		      <u-input v-model="form.bank_branch" placeholder="开户行" />
		    </u-form-item>
			<u-form-item label="手机号" prop="reserve_phone">
		      <u-input v-model="form.reserve_phone" placeholder="预留手机号" />
		    </u-form-item>
			<u-form-item label="验证码" prop="smsCode" :border-bottom="false">
		      <u-input v-model="form.smsCode" placeholder="验证码" />
			  <view class="captcha-sms" @click="handelSmsCaptcha()">
			    <text v-if="!smsState" class="activate">发送验证码</text>
			    <text v-else class="un-activate">重新发送({{ times }})秒</text>
			  </view>
		    </u-form-item>
		  </u-form>
		</view>
		<!-- 操作按钮 -->
		<view class="footer">
		  <view class="btn-wrapper">
		    <view class="btn-item btn-item-main" @click="bindBank()">保存</view>
		  </view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/recovery'
	import * as CaptchaApi from '@/api/captcha'
	const form = {
	  reserve_phone: '',
	  bank_card_number: '',
	  bank_branch: '',
	  ID_card: '',
	  Cardholder: '',
	  smsCode:''
	}
	const times = 60
	export default {
	  data() {
	    return {
	      form,
		  smsState:false,
		  captcha: {},
		  times
	    }
	  },
	
	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad(options) {},
	
	  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	  onReady() {
	  },
	
	  methods: {
	
	   bindBank(){
		   const app = this
		   // 设置列表数据
		   Api.bankAdd({
		   		user_id:uni.getStorageSync('userId'),
				reserve_phone:this.form.reserve_phone,
				bank_card_number:this.form.bank_card_number,
				bank_branch:this.form.bank_branch,
				ID_card:this.form.ID_card,
				Cardholder:this.form.Cardholder,
				smsCode:this.form.smsCode,
		   	})
		   	.then(result => {
		   		uni.navigateTo({
		   			url:'/pages/bank/index'
		   		})
		   		console.log(result)
		   	})
		   	.finally()
	   },
	   // 点击发送短信验证码
	   handelSmsCaptcha() {
	     const app = this
	     // if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
	       app.sendSmsCaptcha()
	     // }
	   },
	   // 请求发送短信验证码接口
	   sendSmsCaptcha() {
	     const app = this
	     app.isLoading = true
	     CaptchaApi.sendSmsCaptcha({
	         form: {
	           captchaKey: app.captcha.key,
	           // captchaCode: app.captchaCode,
	           mobile: app.form.reserve_phone
	         }
	       })
	       .then(result => {
	         // 显示发送成功
	         app.$toast(result.message)
	         // 执行定时器
	         app.timer()
	       })
	       .catch(() => app.getCaptcha())
	       .finally(() => app.isLoading = false)
	   },
	   timer() {
	     const app = this
	     app.smsState = true
	     const inter = setInterval(() => {
	       app.times = app.times - 1
	       if (app.times <= 0) {
	         app.smsState = false
	         app.times = times
	         clearInterval(inter)
	       }
	     }, 1000)
	   },
	
	  }
	}
</script>

<style scoped>
	.form-wrapper {
	  margin: 20rpx auto 20rpx auto;
	  padding: 0 40rpx;
	  width: 94%;
	  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
	  border-radius: 16rpx;
	  background: #fff;
	}
	
	/* 底部操作栏 */
	
	.footer {
	  margin-top: 60rpx;	
	}
	.btn-wrapper {
	  height: 100%;
	  display: flex;
	  align-items: center;
	  padding: 0 20rpx;
	}
		
	.btn-item {
	  flex: 1;
	  font-size: 28rpx;
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  color: #fff;
	  border-radius: 50rpx;
	}
		
	.btn-item-main {
	  background: #66B347;
		
	  // 禁用按钮
	  &.disabled {
	    background: #ff9779;
	  }
	}
</style>